<template>
  <div class="inner">
    <el-form ref="form" :model="queryParams" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入"
              size="small"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item label-width="0">
            <el-button size="mini" @click="search()">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item label-width="0">
            <el-button size="mini" @click="remakeData">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20" style="margin-bottom: 8px">
      <el-col :span="1.5">
        <el-button @click="Add">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button :disabled="dans" @click="upDate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button :disabled="duos" @click="HandleDelete">删除</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="dataTable"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column type="index" width="55" align="center">
      </el-table-column>
      <el-table-column prop="date" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="upDate(scope.row)"> 修改 </el-button>
          <el-button type="text" @click="HandleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="open" :title="title" width="40%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入名称"> </el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入地址"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      open: false,
      //查询条件
      queryParams: {
        name: "",
      },
      //新增、修改表单
      form: {
        date: "",
        name: "",
        address: "",
      },
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //暂存选中的ID
      ids: [],
      //单选判断
      dans: true,
      //多选判断
      duos: true,
      //为了保留原数据
      tableDataSave: [],
    };
  },
  mounted() {
    //在页面加载的时候 保存一份原始数据用来重置
    this.tableDataSave = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    //   新增
    Add() {
      //调用重置
      this.reset();
      this.title = "新增数据";
      this.open = true;
    },
    //深拷贝
    upDate(row) {
      if (row.id == undefined) {
        let index = this.tableData.findIndex((item) => item.id == this.ids[0]);
        let obj = this.tableData[index];
        this.form = obj;
        this.open = true;
      } else {
        this.title = "修改数据";
        let obj = JSON.parse(JSON.stringify(row)); //关键在这里
        this.form = obj;
        this.open = true;
      }
    },
    //   查询
    search() {
      // 这里也是拷贝一份数据出来处理过滤，就避免了操作原数据
      let tempTableData = JSON.parse(JSON.stringify(this.tableData));
      let newtbData = [];
      //通过名称去筛选
      if (this.queryParams.name) {
        tempTableData.filter((item) => {
          if (item.name.indexOf(this.queryParams.name) !== -1) {
            newtbData.push(item);
            return;
          }
        });
        this.tableData = newtbData;
      } else {
        return;
      }
    },
    //提交按钮操作 新增和修改公用
    submitForm() {
      //判断是新增还是修改
      if (this.title == "新增数据") {
        //随机生成ID作为唯一值
        this.form.id == this.guid();
        //保存进数组
        this.tableData.push(this.form);
        //关闭弹窗
        this.open = false;
      } else if (this.title == "修改数据") {
        //通过ID获取下标
        let index = this.tableData.findIndex((item) => item.id == this.form.id);
        //替换删除数据
        this.tableData.splice(index, 1, this.form);
        //关闭弹窗
        this.open = false;
      }
    },
    //删除功能
    HandleDelete(row) {
      //判断是多选还是单选
      if (row.id == undefined) {
        //遍历保存的选中ID
        this.ids.forEach((res) => {
          //通过ID去删除
          let index = this.tableData.findIndex((item) => item.id == res);
          this.tableData.splice(index, 1);
        });
        //清楚掉table的选中
        this.$refs.dataTable.clearSelection(); //清除之前的选中状态
      } else {
        //通过ID 去获取数组下标
        let index = this.tableData.findIndex((item) => item.id == row.id);
        this.tableData.splice(index, 1);
      }
    },
    //重置表单
    reset() {
      //重置表单可以避免修改后打开新增又会显示数据
      this.form = {
        date: "",
        name: "",
        address: "",
      };
    },
    //组件多选
    handleSelectionChange(row) {
      //这里遍历选中的id 然后保存下来
      this.ids = row.map((item) => item.id);
      //修改只能修改一个 所以判断了选中是不是只选了一个
      this.dans = row.length != 1;
      //删除判断 是否有选中值  没有选中就禁用
      this.duos = !row.length;
    },
    //重置功能 这里主要是提前保存了一次数据  如果有后端那就不需要这样写了
    remakeData() {
      //清空查询框
      this.queryParams = { name: "" };
      //保存的数据赋值给列表
      this.tableData = this.tableDataSave;
    },
    //ID生成 网上找的
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    //关闭新增弹窗
    close() {
      this.open = false;
    },
  },
};
</script>

<style scoped>
.inner {
  padding: 20px;
  width: 100%;
  height: 100%;
  background: pink;
}
</style> 